<template>
  <div>
    <Header v-if="isshow"></Header>
    <FootBar v-if="isshow"></FootBar>
    <transition name="app" mode="out-in">
      <router-view ></router-view>
    </transition>
   
  </div>
</template>
<script>
import Header from "./components/Header/header";
import FootBar from "./components/FootBar/footbar";
export default {
  components: {
    FootBar,
    Header,
    
  },
  data(){
    return{
      isshow:true,
    }
  },
  created(){
    this.$bus.$on("FooterBar",(show)=>{
      this.isshow = show;
    }),
    this.$bus.$on("NavBar",(show)=>{
      this.isshow = show;
    })
  },

  mounted() {},
};
</script>

<style lang="scss">
* {
  padding: 0;
  margin: 0;
}
html,body{
  background: whitesmoke;
}
li {
  list-style: none;
}

.app-enter-active{
    animation: aaa .5s
  }
  .app-leave-active{
    animation: aaa .5s reverse
  }
  @keyframes aaa{
    0%{
      opacity: 0;
      transform: translateY(80px)
    }
    100%{
      opacity: 1;
      transform: translateX(0px)
    }
  }
</style>
